<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { getDataMaterial } from "../../api/api";
import { useRouter } from "vue-router";
const router = useRouter()
const data = ref()
const getData = async () => {
    const res = await getDataMaterial()
    data.value = res.data.data
}
onMounted(() => {
    getData()
})
const routerDef = (e: string) => {
    router.push({ name: 'detailsPage', query: { type: e } })
}
const routerData = (e:string) => {
    router.push({name:'ThisSelect',query:{type:e}})
}
const routerselect = () => {
    router.push({name: 'select',query:{num:0,isrouter:1}})
}
</script>

<template>
    <div class="contnetPC">
        <div class="data">
            <div class="select">
                <ul>
                    <li @click="routerData('人物')">人物素材<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                    <li @click="routerData('地图')">地图素材<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                    <li @click="routerData('武器')">武器素材<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                    <li @click="routerData('物品')">物品素材<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                    <li @click="routerselect">更多素材<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                    <li>教程视频<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                    <li>联系我们<el-icon class="icon">
                            <ArrowRight />
                        </el-icon></li>
                </ul>
            </div>
            <div class="carousel">
                <div class="block text-center" m="t-4">
                    <el-carousel trigger="click" height="500px">
                        <el-carousel-item>
                            <img src="../../../public/hd1.jpg" alt="">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="../../../public/1.jpg" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="newData">
                <h4>最新发布</h4>
                <div class="list">
                    <div class="li" v-for="(i, index) in data" @click="routerDef(i._id)">
                        <a href="javascript:;">
                            <el-tag type="success">{{ index + 1 }}</el-tag>
                            <p style="margin-left: 10px;">{{ i.name }}</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.contnetPC {
    width: 100%;
    height: 500px;
    margin-top: 60px;
}

ul {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: (1, 1fr);
}

li {
    color: white;
    border-bottom: 1px solid white;
    background-color: #39364d;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.8s ease;
}

li:hover {
    background-color: #39364d67;
    /* 鼠标悬停时改变背景颜色 */
    cursor: pointer;
}

p {
    transition: color 0.8s ease;
}

p:hover {
    color: rgba(255, 0, 0, 0.5);
}

.data {
    max-width: 1500px;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 17% 62% 17%;
    gap: 2%;
}

img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.newData {
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

h3 {
    color: #999;
}

h4 {
    position: relative;
    top: 10px;
}

.list {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

a {
    max-width: 100px;
    display: flex;
    align-items: center;
    color: black;
    font-size: 12px
}

.li {
    margin-top: 15px;
}

/* ------ */
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.icon {
    position: relative;
    left: 27%;
}
</style>